<template>
  <view class="container">
    <view class="inner-box">
      <!-- 订单状态 -->
      <view class="reset order-status common-mar-pad">
        <uni-section title="订单状态" type="line">
          <view class="status">
            已完成
          </view>
        </uni-section>
      </view>
      <!-- 订单进度 -->
      <view class="reset progress common-mar-pad">
        <uni-section title="订单进度" type="line">
          <uni-steps :options="[{title: '助教已接单'}, {title: '开始服务'}, {title: '服务结束'}]" :active="0"></uni-steps>
        </uni-section>
      </view>
      <!-- 助教照片，姓名等主要信息区 -->
      <view class="main-info common-mar-pad">
        <!-- 头部 -->
        <view class="head flex-row-between-center">
          <view class="ass-name" @click="goDetail(1)">
            赵芊芊<uni-icons style="margin-left: 8rpx;" size="18" type="right"></uni-icons>
          </view>
          <view class="right" @click="collect">
            <uni-icons :color="isCollect?'#ff0000':''" style="margin-right: 8rpx;" :type="isCollect?'star-filled':'star'" size="18"></uni-icons>收藏
          </view>
        </view>
        <view class="body flex-row-between-center">
          <view class="ass-img flex-row-align-center">
            <image src="../../static/service.jpeg" mode="widthFix" style="width: 200rpx;"></image>
            <view class="info-box">
              <view class="type-name flex-row-align-center">
                <view class="attr-name">
                  陪打时长：
                </view>
                2小时
              </view>
              <view class="reserve-time flex-row-align-center">
                <view class="attr-name">
                  预约时间：
                </view>
                2024-10-11 17:00
              </view>
            </view>
          </view>
          <!-- 服务价格 -->
          <view class="right-price flex-row-align-center">
            ￥
            <view class="counts">
              20
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="row out-take flex-row-between-center">
            <view class="attr-name">
              出行费
            </view>
            <view class="">
              ￥27
            </view>
          </view>
          <view class="row coupon-count flex-row-between-center">
            <view class="attr-name">
              优惠券
            </view>
            <view class="value-box flex-row-align-center">
              <view class="value">
                × 1
              </view>
              <view class="text">
                满40减10
              </view>
            </view>
          </view>
          <view class="row discount flex-row-between-center">
            <view class="attr-name">
              折扣
            </view>
            <view class="value">
              无
            </view>
          </view>
          <view class="settle flex-jus-end">
            <view class="digit-box flex-row-align-center">
              <view class="coupon flex-row-align-center">
                <view class="text">
                  已优惠:￥
                </view>
                <view class="counts">
                  10
                </view>
              </view>
              <view class="total-box flex-row-align-center">
                <view class="text">
                  总计:￥
                </view>
                <view class="counts">
                  37
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--  其它详细信息-->
      <view class="other-info common-mar-pad">
        <view class="row order-id-box flex-row-between-center">
          <view class="attr-name">
            订单编号
          </view>
          <view class="right-value flex-row-align-center">
            1234 2244 2234 224 212
            <view class="copy">
              复制
            </view>
          </view>
        </view>
        <view class="row submit-time flex-row-between-center">
          <view class="attr-name">
            下单时间
          </view>
          <view class="value">
            2024-11-11 14:34:23
          </view>
        </view>
        <!-- 支付状态 -->
        <view class="row pay-status flex-row-between-center">
          <view class="attr-name">
            支付状态
          </view>
          <view class="value">
            已支付
          </view>
        </view>
        <!-- 备注: -->
        <view class="row say flex-row-between-center">
          <view class="attr-name">
            备注
          </view>
          <view class="value">
            无
          </view>
        </view>
        <!-- 出行方式 -->
        <view class="row out-method flex-row-between-center">
          <view class="attr-name">
            出行方式
          </view>
          <view class="value">
            滴滴/出租
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app'
import { ref } from 'vue';
  let id = null;
  const isCollect=ref(false);
  //接收订单id
  onLoad((options) => {
    id = options.id;
  })
  
  // 点击查看助教详情
  function goDetail(id){
    uni.navigateTo({
      url:`/subpkg/assistant-detail/assistant-detail?id=${id}`
    })
  }
  // 点击收藏助教助教列表页收藏数+1
  function collect(){
    // 点击切换样式
    isCollect.value=!isCollect.value;
    console.log('请求收藏接口')
  }
</script>

<style lang="scss" scoped>
  .container {
    background: $uni-bg-color-grey;

    .inner-box {
      overflow: hidden;
      min-height: 100vh;

      .attr-name {
        color: $uni-text-color-grey;
      }

      // 价格数字
      .counts {
        color: red;
        font-size: 30rpx;
      }

      // 间距
      .row {
        margin: 20rpx 0;
      }
      
      .reset{
        padding: 0%;
        padding-bottom: 20rpx;
        overflow: hidden;
      }
      // 订单状态
      .order-status{
       
       .status{
         padding-left: 10rpx;
       }
      }
      // 订单进度
      .progress {
      }

      // 主要信息区
      .main-info {
        // 助教名字+收藏

        .head {
          padding-bottom: 10rpx;
          border-bottom: 1px solid;
          border-bottom-color: $uni-bg-color-grey;
          
        }

        .body {
          border-bottom: 1px solid;
          border-bottom-color: $uni-bg-color-grey;
          padding-bottom: 20rpx;
          margin: 20rpx 0;

          // 左侧图片
          .ass-img {
            .info-box {
              margin-left: 12rpx;

              .type-name {
                margin-bottom: 20rpx;
              }
            }
          }

          // 右侧价格
          .right-price {}
        }

        // 底部各项费用
        .footer {

          // 出行费
          .out-take {}

          // 优惠券
          .coupon-count {
            .value-box {
              .value {
                margin-right: 10rpx;
              }

              .text {
                color: orange;
              }
            }
          }

          //折扣
          .discount {}

          // 总计
          .settle {
            margin-top: 20rpx;

            .digit-box {
              .coupon {
                margin-right: 20rpx;
              }
            }
          }
        }
      }

      // 其它详细信息
      .other-info {

        // 订单编号
        .order-id-box {
          .right-value {
            .copy {
              border-radius: 6px;
              padding: 0 10rpx;
              background: $uni-bg-color-grey;
              margin-left: 10rpx;
              font-size: 18rpx;
            }
          }
        }

        // 出行方式
        .out-method {
          margin-bottom: 0;
        }
      }
    }
  }
</style>